<template>
  <div class="register-detail-info">
    <div class="register-detail-info__content">
      <div class="register-detail-info__content__jbzl">
        <div class="content__top">
          <div style="display:flex;">
            <span>基本资料</span>
            <span style="color:#ff0606;font-size:0.26rem;">(必填项)</span>
          </div>
        </div>
        <line-input label="用户名"
                    v-validate="'required|max:24'"
                    name="用户名"
                    :readonly="readonly"
                    placeholder="请输入用户名"
                    v-model="postParam.contacts"></line-input>
        <line-input label="手机号"
                    placeholder="请输入手机号"
                    v-validate="'required|mobile'"
                    name="手机号"
                    :readonly="readonly"
                    v-model="postParam.conphone"></line-input>
        <line-input label="所在省市区"
                    v-if="!readonly"
                    placeholder="请选择所在省市区">
          <address-picker :defaultValue="paramValue"
                          :showRight="true"
                          :defaultStyle="{'font-size': '0.3rem','color': '#000000'}"></address-picker>
        </line-input>
        <line-input label="所在省市区"
                    placeholder="请输入所在省市区"
                    :readonly="readonly"
                    v-else
                    v-validate="'required|min:1|max:40'"
                    name="所在省市区"
                    v-model="onlyAddress"></line-input>
        <line-input label="收货地址"
                    placeholder="请输入收货地址"
                    :readonly="readonly"
                    v-validate="'required|min:1|max:40'"
                    name="收货地址"
                    v-model="postParam.address"></line-input>
        <line-input label="税号"
                    placeholder="请输入税号"
                    :readonly="readonly"
                    v-validate="'required|min:1|max:40'"
                    name="税号"
                    v-model="postParam.taxnumber"></line-input>
        <line-input label="开户行"
                    placeholder="请输入开户行"
                    :readonly="readonly"
                    v-validate="'required|min:1|max:40'"
                    name="开户行"
                    v-model="postParam.bankaddr"></line-input>
        <div class="register-detail-info__content__jbzl__zjlx">
          <div class="register-detail-info__content__jbzl__zjlx__header">
            <div class="register-detail-info__content__jbzl__zjlx__header__title">
              <span>证件类型</span>
            </div>
            <div class="register-detail-info__content__jbzl__zjlx__header__radio"
                 v-if="!readonly">
              <div class="register-detail-info__content__jbzl__zjlx__header__radio__yyzz"
                   @click="selectedYyzz">
                <img :src="yyzzImgUrl"
                     alt="">
                <span>营业执照</span>
              </div>
              <div class="register-detail-info__content__jbzl__zjlx__header__radio__sfzjz"
                   @click="selectedSfzjz">
                <img :src="sfzjzImgUrl"
                     alt="">
                <span>身份证件照</span>
              </div>
            </div>
            <div v-else
                 class="register-detail-info__content__jbzl__zjlx__header__radio">
              <div class="register-detail-info__content__jbzl__zjlx__header__radio__yyzz"
                   v-if="onlyType === 'yyzz'"
                   @click="selectedYyzz">

                <span>营业执照</span>
              </div>
              <div class="register-detail-info__content__jbzl__zjlx__header__radio__sfzjz"
                   v-if="onlyType === 'shzjz'"
                   @click="selectedSfzjz">

                <span>身份证件照</span>
              </div>
            </div>
          </div>
          <div class="register-detail-info__content__jbzl__zjlx__content">
            <div class="register-detail-info__content__jbzl__zjlx__content__pics"
                 :style="zjlxStyle">
              <div>
                <!-- <image-upload @successUploadKey="successUploadKey"
                                v-if="zjlx === 'sfzjz'"
                                :src="zjlxItem.scsfzBmz.src"
                                :keyId="zjlxItem.scsfzBmz.keyId" /> -->
                <upload-imgs :extend="{size:'170 170'}"
                             v-if="zjlx === 'sfzjz'"
                             imgtype="jpg"
                             emptyImg="scsfz-bmz"
                             v-model="postParam.idcardimg1" />
              </div>
              <div>
                <!-- <image-upload @successUploadKey="successUploadKey"
                                v-if="zjlx === 'sfzjz'"
                                :src="zjlxItem.scsfz.src"
                                :keyId="zjlxItem.scsfz.keyId" /> -->
                <upload-imgs :extend="{size:'170 170'}"
                             v-if="zjlx === 'sfzjz'"
                             imgtype="jpg"
                             emptyImg="scsfz-scz"
                             v-model="postParam.idcardimg2" />
              </div>
              <div>
                <!-- <image-upload @successUploadKey="successUploadKey"
                                v-if="zjlx === 'yyzz'"
                                :src="zjlxItem.scyyzz.src"
                                :keyId="zjlxItem.scyyzz.keyId" /> -->
                <upload-imgs :extend="{size:'170 170'}"
                             v-if="zjlx === 'yyzz'"
                             emptyImg="scyyzz"
                             v-model="postParam.blicenseimg" />
              </div>
            </div>

            <div class="register-detail-info__content__jbzl__zjlx__content__empty"></div>
          </div>

        </div>
        <line-input label="身份证号"
                    placeholder="请输入身份证号"
                    v-validate="'required|min:16|max:18'"
                    name="身份证号"
                    :readonly="readonly"
                    v-if="zjlx === 'sfzjz'"
                    v-model="postParam.idcard"></line-input>
        <line-input label="营业执照号"
                    placeholder="请输入营业执照号"
                    v-validate="'required'"
                    name="营业执照号"
                    :readonly="readonly"
                    v-if="zjlx === 'yyzz'"
                    v-model="postParam.blicense"></line-input>
      </div>
    </div>
    <div class="register-detail-info__footer">
      <button class="btn__n"
              @click="updateGlShop(errors)">{{btnsText}}</button>
    </div>
  </div>
</template>
<script>
  import inputValidate from '@/mixins/input'
  import lineInput from '@/components/line-input'
  import birthdayPicker from '@/components/birthday-picker'
  import singlePicker from '@/components/single-picker'
  import addressPicker from '@/components/address-line'
  import uploadImgs from '@/components/upload-imgs'
  import mixins from '@/mixins'
  export default {
    name: 'register-detail-info',
    mixins: [inputValidate, mixins],
    data () {
      return {
        imgs: [],
        zjlxItem: {
          scsfzBmz: {
            src: require('@image/scsfz-bmz.jpg'),
            keyId: 'idcardimg1'
          },
          scsfz: {
            src: require('@image/scsfz-scz.jpg'),
            keyId: 'idcardimg2'
          },
          scyyzz: {
            src: require('@image/scyyzz.png'),
            keyId: 'blicenseimg'
          }
        },
        uploadParam: {
          token: ''
        },
        zjlx: 'yyzz',
        paramValue: {
          provincecode: '',
          provincename: '',
          citycode: '',
          cityname: '',
          areaname: '',
          areacode: ''
        },
        postParam: {
          // 联系人
          contacts: '',
          // 联系人电话
          conphone: '',
          // 收货地址
          address: '',
          // 营业执照路径
          blicenseimg: '',
          // 营业执照号
          blicense: '',
          // 身份证路径正面
          idcardimg1: '',
          // 身份证路径反面
          idcardimg2: '',
          // 身份证号
          idcard: '',
          // 税号
          taxnumber: '',
          // 开户行
          bankaddr: '',
          // 证件类型  0:营业执照 1:身份证件照
          authtype: '0'
        },
        userinfo: {},
        readonly: false,
        userStatus: '',
        onlyAddress: '',
        onlyType: '',
        btnsText: '提交'
      }
    },
    watch: {
      paramValue: {
        deep: true,
        handler (value) {
          Object.assign(this.postParam, this.paramValue)
        }
      }
    },
    computed: {
      zjlxStyle () {
        if (this.zjlx === 'sfzjz') {
          return {
            'justify-content': 'space-around'
          }
        } else {
          return {
            'justify-content': 'flex-start'
          }
        }
      },
      yyzzImgUrl () {
        if (this.zjlx === 'yyzz') {
          return require('@image/zlrz-selected-btn.png')
        } else {
          return require('@image/zlrz-unselected-btn.png')
        }
      },
      sfzjzImgUrl () {
        if (this.zjlx === 'sfzjz') {
          return require('@image/zlrz-selected-btn.png')
        } else {
          return require('@image/zlrz-unselected-btn.png')
        }
      }
    },
    mounted () {
      let user = this.user
      // 如果状态有值，就是已经提交过，显示数据
      if (user.status.trim().length > 0 && user.status - '0' >= 0 && user.status - '2' <= 0) {
        Object.assign(this.postParam, user)
      }
      this.userStatus = user.status

      // 审核中，审核通过
      if (user.status.trim().length > 0 && (this.userStatus - '0' === 0 || this.userStatus - '1' === 0)) {
        this.readonly = true
        this.onlyAddress = this.postParam.provincename + this.postParam.cityname + this.postParam.areaname
        this.onlyType = this.postParam.blicenseimg && this.postParam.blicenseimg.trim().length > 0 ? 'yyzz' : 'sfzjz'
        if (this.userStatus - '0' === 0) {
          this.btnsText = '认证资料审核中...'
        } else {
          this.btnsText = '认证资料审核通过'
        }
      }
      // 审核失败
      if (this.userStatus - '2' === 0) {
        this.btnsText = '认证资料审核失败，重新提交'
        // 设置省市区
        this.paramValue.provincecode = this.postParam.provincecode
        this.paramValue.provincename = this.postParam.provincename
        this.paramValue.citycode = this.postParam.citycode
        this.paramValue.cityname = this.postParam.cityname
        this.paramValue.areacode = this.postParam.areacode
        this.paramValue.areaname = this.postParam.areaname
      }
      // this.wxShare()
    },
    methods: {
      selectedYyzz () {
        this.zjlx = 'yyzz'
        this.postParam.authtype = '0'
        this.postParam.idcardimg1 = ''
        this.postParam.idcardimg2 = ''
      },
      selectedSfzjz () {
        this.postParam.authtype = '1'
        this.postParam.blicenseimg = ''
        this.zjlx = 'sfzjz'
      },
      successUploadKey (key, keyId) {
        this.postParam[keyId] = key
      },
      checkString (val) {
        if (val && val.trim().length > 0) {
          return true
        }
      },
      checkAddress () {
        if (this.checkString(this.postParam.provincecode) && this.checkString(this.postParam.provincename)) {
          return true
        }
        return false
      },
      updateGlShop: async function (errors) {
        // 审核中，审核通过
        if (this.userStatus.trim().length > 0 && (this.userStatus - '0' === 0 || this.userStatus - '1' === 0)) {
          return
        }
        await this.$validator.validate()
        if (this.validateErrors(errors)) {
          return
        }
        if (this.zjlx === 'yyzz') {
          if (!(
            this.postParam.blicenseimg &&
            this.postParam.blicenseimg.length > 0
          )) {
            return this.$toast('请上传营业执照照片')
          }
        } else if (this.zjlx === 'sfzjz') {
          if (!(
            this.postParam.idcardimg1 &&
            this.postParam.idcardimg1.length > 0 &&
            this.postParam.idcardimg2 &&
            this.postParam.idcardimg2.length > 0
          )) {
            return this.$toast('请上传身份证照照片')
          }
        } else {
          return this.$toast('请上传证件类型照片')
        }
        if (!this.checkAddress()) {
          this.$toast('请选择省市区')
          return
        }
        let self = this
        try {
          this.$ajax.put('/zMembers/update.json', {
            members: this.postParam
          })
          self.$router.replace({name: 'rz-success'})
        } catch (e) {
          console.error(e)
        }
      }
    },
    components: {
      lineInput,
      addressPicker,
      birthdayPicker,
      singlePicker,
      uploadImgs
    }
  }
</script>
<style lang="stylus" scoped>
.register-detail-info {
  .register-detail-info__content {
    .register-detail-info__content__jbzl {
      .register-detail-info__content__jbzl__zjlx {
        padding-left: 30px;
        padding-right: 20px;

        .register-detail-info__content__jbzl__zjlx__header {
          height: 80px;
          display: flex;
          justify-content: flex-start;
          flex-direction: row;
          align-items: center;

          .register-detail-info__content__jbzl__zjlx__header__title {
            width: 30%;
            display: flex;

            span {
              font-family: PingFangSC-Regular;
              font-size: 30px;
              color: #333333;
              text-align: left;
            }
          }

          .register-detail-info__content__jbzl__zjlx__header__radio {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;

            .register-detail-info__content__jbzl__zjlx__header__radio__yyzz {
              display: flex;
              align-items: center;

              img {
                width: 34px;
                height: 34px;
                vertical-align: middle;
              }

              span {
                font-family: PingFangSC-Regular;
                font-size: 30px;
                color: #666666;
                text-align: left;
              }
            }

            .register-detail-info__content__jbzl__zjlx__header__radio__sfzjz {
              display: flex;
              margin-left: 73px;
              align-items: center;

              img {
                width: 34px;
                height: 34px;
                vertical-align: middle;
              }

              span {
                font-family: PingFangSC-Regular;
                font-size: 30px;
                color: #666666;
                text-align: left;
              }
            }
          }
        }

        .register-detail-info__content__jbzl__zjlx__content {
          width: 100%;
          display: flex;
          justify-content: center;
          flex-direction: row;

          .register-detail-info__content__jbzl__zjlx__content__pics {
            padding-top: 12px;
            padding-bottom: 12px;
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: row;
            align-items: center;

            img {
              width: 170px;
              height: 170px;
            }
          }

          .register-detail-info__content__jbzl__zjlx__content__empty {
            width: 162px;
            height: 100%;
            background: blue;
          }
        }

        .register-detail-info__content__jbzl__zjlx__footer {
          height: 56px;
          width: 100%;
          display: flex;
          justify-content: flex-end;
          flex-direction: row;
          align-items: center;

          .register-detail-info__content__jbzl__zjlx__footer__cksl {
            background: #f9f9f9;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            width: 114px;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;

            span {
              font-family: PingFangSC-Regular;
              font-size: 22px;
              color: #9c9c9c;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .register-detail-info__footer {
    position: relative;
    padding-top: 45px;
    padding-bottom: 45px;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .content__top {
    background: #f8f8f8;
    padding-left: 30px;
    height: 75px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    span {
      height: 100%;
      vertical-align: middle;
      font-size: 30px;
      color: #333333;
      text-align: center;
    }
  }
}
</style>
